<template>

  <div class="register">
    <h1 class="title">欢迎注册-毕业生招聘系统</h1>
    <div class="center">
      <a-form
          ref="formRef"
          :model="formState"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          class="register-from"
      >
        <a-form-item ref="username" label="昵称" name="username">
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item ref="account" label="账号" name="account">
          <a-input v-model:value="formState.account" />
        </a-form-item>
        <a-form-item
            :rules="[{ required: true, message: '请输入你的密码!' }]"
            label="密码"
            name="password"
        >
          <a-input-password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon"/>
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item
            :rules="[{ required: true, message: '请确认你的密码!' }]"
            label="确认密码"
            name="confirmPassword"
        >
          <a-input-password v-model:value="formState.confirmPassword">
            <template #prefix>
              <LockOutlined class="site-form-item-icon"/>
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item
            :rules="[{ required: true, message: '请选择你的角色!' }]"
            label="角色" name="role">
          <a-radio-group v-model:value="formState.role">
            <a-radio value="student">毕业生</a-radio>
            <a-radio value="enterprise">企业</a-radio>
            <a-radio value="admin">管理员</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">创建</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
        <a href="/login">现在去登录！</a>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRaw } from 'vue';
import {LockOutlined} from "@ant-design/icons-vue";
import {registerAPI} from "@/apis/user.js";
const formRef = ref();
const labelCol = {
  span: 5,
};
const wrapperCol = {
  span: 15,
};
const formState = reactive({
  username: '',
  account: '',
  password: '',
  confirmPassword: '',
  role: '',
});
//表单验证规则
const rules = {
  username: [
    {
      required: true,
      message: '请输入您的昵称！',
      trigger: 'change',
    },
    {
      min: 2,
      max: 8,
      message: '长度应该在2-8',
      trigger: 'blur',
    },
  ],
  account: [
    {
      required: true,
      message: '请输入您的账号',
      trigger: 'change',
    },
    {
      min: 8,
      max: 15,
      message: '长度应该在8-15',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入您的密码',
      trigger: 'change',
    },
    {
      min: 6,
      max: 12,
      message: '长度应该在6-12',
      trigger: 'blur',
    },
  ],
  confirmPassword: [
    {
      required: true,
      message: '请确认您的密码',
      trigger: 'change',
    },
    {
      min: 6,
      max: 12,
      message: '长度应该在6-12',
      trigger: 'blur',
    },
  ],
  role: [
    {
      required: true,
      message: '请选择你的角色！',
      trigger: 'change',
    },
  ],
};
const onSubmit = () => {
  formRef.value
      .validate()
      .then(async () => {
        const res = await registerAPI((formState))
        console.log('res', res);
        if(res.data.flag){
          success(res.data.message+"去登录吧！");
          console.log('success submit!', toRaw(formState));
        }else {
          console.log('error submit!', toRaw(formState));
        }

      })
      .catch(error => {
        console.log('error', error);
      });
};
//气泡提示
import { message } from 'ant-design-vue';

const success = (msg) => {
  message.success(msg);
};
const resetForm = () => {
  formRef.value.resetFields();
};
</script>
<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100vh; /* 使父容器占满整个视口高度 */
  display: flex;
  flex-direction: column; /* 垂直方向排列 */
  align-items: center; /* 水平居中 */
  justify-content: flex-start; /* 从顶部开始排列 */
  background-image: url('src/assets/image/背景.jpg'); /* 设置背景图片 */
  background-size: cover; /* 或者使用 contain */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-position: center; /* 使背景图片居中 */
  .title{
    margin-top: 160px;
    font-size: 30px;
  }
  .center {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8); /* 白色背景，透明度为0.8 */
    border-radius: 10px; /* 圆角 */
    padding: 20px; /* 内边距，可以根据需要调整 */
    width: auto; /* 宽度，可以根据需要调整 */
    height: auto; /* 高度，可以根据需要调整 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
    .register-from {
      width: 400px;
    }
  }
}


</style>